<template>
  <div class="profile_set_account">
    <profile-title title="账号设置"></profile-title>
    <div class="avatar">
      <span class="title">头像</span>
      <img :src="getAvatar" alt="">
      <span>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
        <i class=" avatar-uploader-icon">点击修改头像</i>
      </el-upload>
      </span>
    </div>
    <div class="nickname">
      <span class="title">昵称</span>
      <span class="name">{{getNickname}}</span>
      <span class="reset">
        <el-form>
          <el-form-item>
            <el-button type="text" @click="resetName">修改昵称</el-button>
          </el-form-item>
        </el-form>
      </span>
    </div>
    <div class="email">
      <span class="title">邮箱</span>
      <span class="content">{{getEmail}}</span>
      <span class="status" @click="bindEmail">{{getEmail === '未绑定邮箱'? '去绑定' : '已绑定'}}</span>
    </div>
    <div class="phone">
      <span class="title">手机</span>
      <span class="content">{{getPhone}}</span>
      <span class="status" @click="bindPhone">{{getPhone === '未绑定手机'? '去绑定' : '已绑定'}}</span>
    </div>
    <div class="password">
      <span class="title">密码</span>
      <span class="forget" @click="forgetPass">忘记密码?</span>
      <span class="reset" @click="resetPass">修改密码</span>
    </div>
  </div>
</template>

<script>
  import ProfileTitle from "../ProfileTitle";

  // 引入方法和类
  import {routerReplace} from "common/Utils";
  import {setAccount, uploadAvatar} from "network/profile";

  export default {
    name: "ProfileSetAccount",
    components: {
      ProfileTitle
    },
    data() {
      return {
        imageUrl: '',
      };
    },
    computed: {
      getNickname() {
        return this.$store.state.userInfo.nickname
      },
      getAvatar() {
        return this.$store.state.userInfo.avatar
      },
      getEmail() {
        return this.$store.state.userInfo.email ? this.$store.state.userInfo.email : '未绑定邮箱'
      },
      getPhone() {
        return this.$store.state.userInfo.phone ? this.$store.state.userInfo.phone : '未绑定手机'
      }
    },
    methods: {
      resetName() {
        this.$prompt('请输入新的昵称', '修改昵称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /./,
          inputErrorMessage: '请输入内容'
        }).then(({ value }) => {
          // 发送网络请求修改name,同时修改Vuex
          const obj = {
            nickname: value
          }
          setAccount(this.$store.state.userInfo.id, obj).then(res => {
            if(res.data.code) {
              const userInfo = {
                nickname: value,
                avatar: this.$store.state.userInfo.avatar,
                phone: this.$store.state.userInfo.phone,
                email: this.$store.state.userInfo.email,
                id: this.$store.state.userInfo.id,
                isLogin: this.$store.state.userInfo.isLogin,
              }
              this.$store.commit('setUserInfo', userInfo)
              this.$toast.show('修改成功', 'success', 1000)
            }
          })
        }).catch(() => {});
      },
      bindEmail() {
        if(!this.$store.state.userInfo.email) {
          this.$prompt('请输入邮箱', '绑定邮箱', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            inputErrorMessage: '输入的邮箱格式有误'
          }).then(({ value }) => {
            // 发送网络请求绑定邮箱,同时修改Vuex
            const obj = {
              email: value
            }
            setAccount(this.$store.state.userInfo.id, obj).then(res => {
              console.log(res)
              if(res.data.code) {
                const userInfo = {
                  nickname: this.$store.state.userInfo.nickname,
                  avatar: this.$store.state.userInfo.avatar,
                  phone: this.$store.state.userInfo.phone,
                  email: value,
                  id: this.$store.state.userInfo.id,
                  isLogin: this.$store.state.userInfo.isLogin,
                }
                this.$store.commit('setUserInfo', userInfo)
                this.$toast.show('绑定成功', 'success', 1000)
              }else {
                this.$toast.show('绑定失败，该邮箱已存在', 'default', 1000)
              }
            })

          }).catch(() => {});
        }
      },
      bindPhone() {
        if(!this.$store.state.userInfo.phone) {
          this.$prompt('请输入手机', '绑定手机', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^1[3-9][0-9]{9}$/,
            inputErrorMessage: '输入的手机有误'
          }).then(({ value }) => {
            // 发送网络请求绑定手机,同时修改Vuex
            const obj = {
              phone: value
            }
            setAccount(this.$store.state.userInfo.id, obj).then(res => {
              console.log(res)
              if(res.data.code) {
                const userInfo = {
                  nickname: this.$store.state.userInfo.nickname,
                  avatar: this.$store.state.userInfo.avatar,
                  phone: value,
                  email: this.$store.state.userInfo.email,
                  id: this.$store.state.userInfo.id,
                  isLogin: this.$store.state.userInfo.isLogin,
                }
                this.$store.commit('setUserInfo', userInfo)
                this.$toast.show('绑定成功', 'success', 1000)
              }else {
                this.$toast.show('绑定失败，该手机已存在', 'default', 1000)
              }
            })
          }).catch(() => {});
        }
      },
      forgetPass() {
        routerReplace(this.$router, '/forgetPass')
      },
      resetPass() {
        routerReplace(this.$router, '/resetPass')
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        const obj = {
          avatar: this.imageUrl
        }
        uploadAvatar(this.$store.state.userInfo.id, obj).then(res => {
          console.log(res)
          if(res.data.code) {
            const userInfo = {
              nickname: this.$store.state.userInfo.nickname,
              avatar: this.imageUrl,
              phone: this.$store.state.userInfo.phone,
              email: this.$store.state.userInfo.email,
              id: this.$store.state.userInfo.id,
              isLogin: this.$store.state.userInfo.isLogin,
            }
            this.$store.commit('setUserInfo', userInfo)
            this.$toast.show('修改成功', 'success', 1000)
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  }
</script>

<style scoped>
  .profile_set_account {
    height: calc(100vh - 64px);
    background-color: #fff;
  }

  .avatar,
  .nickname,
  .email,
  .phone,
  .password {
    width: 720px;
    height: 50px;
    margin: 10px auto 0;
    padding: 0 20px;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
    line-height: 50px;
    font-size: 14px;
  }

  .avatar {
    height: 100px;
    line-height: 100px;
  }

  .avatar img {
    vertical-align: middle;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 30px;
    background-color: #002766;
  }

  .avatar i {
    font-style: normal;
    font-weight: 400;
    color: #8F9395;
  }

  span {
    float: left;
  }

  div span:nth-child(1) {
    margin-right: 20px;
    color: #8F9395;
  }

  div span:nth-child(2) {
    font-weight: 700;
  }

  div span:nth-child(3) {
    float: right;
    color: #8F9395;
    cursor: pointer;
  }

  .password .forget {
    color: #8F9395;
    font-weight: 400;
    font-size: 12px;
  }

  .password .forget:hover {
    cursor: pointer;
    color: #002766;
  }

  .reset:hover {
    color: #002766;
  }

  .reset .el-form-item {
    margin: 0;
  }

  .el-button--text {
    color: #8F9395;
  }

  .el-button--text:hover {
    color: #002766;
  }

</style>
